<template>
  <div>
    <el-row justify="space-between">
      <el-col :span="12"  style="display: flex; justify-content: center; align-items: center;width: 100%; height: 700px;">
        <div ref="IndicatorEvaluationScoreChart" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"/>
      </el-col>
      <!-- 新增柱状图 -->
      <el-col :span="12"  style="display: flex; justify-content: center; align-items: center;width: 100%; height: 700px;">
        <div ref="BarChart" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"/>
      </el-col>
      <!-- 新增雷达图 -->
      <el-col :span="12" style="display: flex; justify-content: center; align-items: center;width: 100%; height: 700px;">
        <div ref="RadarChart" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { listIndicatorEvaluationScoreByResult } from "@/api/evaluate/IndicatorEvaluationScore";

export default {
  name: "visualization",
  data() {
    return {
      loading: false,
      IndicatorEvaluationScoreChart: null,
      BarChart: null,
      RadarChart: null,
      chartData: [],
      radarData: [],
      radarIndicators: [],
      rules: {} // 添加空的 rules 对象避免警告
    };
  },
  async mounted() {
    await this.getIndicatorEvaluationScoreByResult();
  },
  methods: {
    renderPieChart() {
      this.IndicatorEvaluationScoreChart = echarts.init(this.$refs.IndicatorEvaluationScoreChart);
      this.IndicatorEvaluationScoreChart.setOption({
        title: {
          text: '各指标分数',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "各项指标得分",
            type: "pie",
            center: ["50%", "50%"],
            data: this.chartData,
            animationEasing: "cubicInOut",
            animationDuration: 1000,
          }
        ]
      });
    },
    renderBarChart() {
      this.BarChart = echarts.init(this.$refs.BarChart);
      this.BarChart.setOption({
        title: {
          text: '指标分数柱状图',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.name),
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: value => Math.round(value * 100) / 100 // 保留两位小数
          },
          interval: 'auto' // 自动计算合适的刻度间隔
        },
        series: [
          {
            name: '分数',
            type: 'bar',
            data: this.chartData.map(item => item.value),
            itemStyle: {
              color: '#5470c6',
            }
          }
        ]
      });
    },
    renderRadarChart() {
      this.RadarChart = echarts.init(this.$refs.RadarChart);
      this.RadarChart.setOption({
        title: {
          text: '指标分数雷达图',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
          },
        },
        tooltip: {},
        radar: {
          indicator: this.radarIndicators,
          center: ['50%', '50%'],
          radius: '65%',
        },
        series: [
          {
            name: '分数对比',
            type: 'radar',
            data: [
              {
                value: this.radarData,
                name: '指标分数',
              }
            ],
            itemStyle: {
              color: '#91cc75',
            }
          }
        ]
      });
    },
    async getIndicatorEvaluationScoreByResult() {
      try {
        this.loading = true;
        const response = await listIndicatorEvaluationScoreByResult(this.$store.state.evaluate.id);
        console.log(response);

        if (!response.data || response.data.length === 0) {
          this.$message.warning('暂无指标数据');
          return;
        }

        const data = response.data.map(item => ({
          name: item.indicatorName,
          value: parseFloat(item.indicatorValue) || 0
        }));

        this.chartData = data;
        this.radarData = data.map(item => item.value);
        this.radarIndicators = data.map(item => ({
          name: item.name,
          max: Math.max(...data.map(d => d.value)) + 10, // 设置雷达图的最大值，加10留出空间
        }));

        this.$nextTick(() => {
          this.renderPieChart();
          this.renderBarChart();
          this.renderRadarChart();
        });
      } catch (error) {
        console.error('获取指标数据失败:', error);
        this.$message.error('获取指标数据失败: ' + (error.message || '服务器错误'));
      } finally {
        this.loading = false;
      }
    }
  },
};
</script>

<style scoped>
</style>
